<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style>
        .test{
            width: 100px;
            height: 100px;
            background-color: #0043d3;
            color:yellow;
            text-align: center;
            font-size: 40px;
            /*text-overflow:clip;*/
            overflow: auto;
        }
        /*页面居中*/
        table{margin: 0 auto}
        .test1{
            width: 0;
            height: 0;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-radius: 50px;
            /*阴影操作 向右是正,向下是正*/
            box-shadow:1px 1px 10px 6px red;
        }
        .test2{
            width: 100px;
            height: 100px;
            background-color: transparent;
        }
        input{outline:none}
    </style>
</head>
<body>
<!--边框的种类-->
<table>
    <tr>
        <td><div class="test" style="border-style: solid;border-width: 2px" >实线边框</div></td>
        <td><div class="test" style="border-style: dotted;border-width: 10px" >点线边框</div></td>
        <td><div class="test" style="border-style: dashed;border-width: 10px" >虚线边框</div></td>
        <td><div class="test" style="border-style: double;border-width: 10px" >双实线边框</div></td>
    </tr>
</table>
<!--对边框进行切割-->
<table>
    <tr>
        <td><div class="test1" style="border-style: solid;border-width: 50px;" ></div></td>
        <td><div class="test1" style="border-style: dotted;border-width: 50px" ></div></td>
        <td><div class="test1" style="border-style: dashed;border-width: 50px" ></div></td>
        <td><div class="test1" style="border-style: double;border-width: 50px" ></div></td>
    </tr>
</table>
<table>
    <tr>
<!--        顺时针顺序
1.一个值四个角
2.两个值对角线
3.三个值上右下左,对角线补充
4.四个值按照顺序设置即可
5.实现○需要时正方形取radius的像素值设置为宽高的一半-->
        <td>
            <div class="test2" style="border-style: solid;border-width: 5px;border-radius: 50px;" >
            </div>
        </td>
        <td><div class="test2" style="border-style: solid;border-width: 5px;border-radius: 5px 15px" ></div></td>
        <td><div class="test2" style="border-style: solid;border-width: 5px;border-radius: 5px 15px 20px" ></div></td>
        <td><div class="test2" style="border-style: solid;border-width: 5px;border-radius: 2px 4px 6px 8px" ></div></td>
    </tr>
</table>
<!--outline轮廓线-->
<div><label>请输入用户名<input type="text"></label></div>
<div><label><input type="submit" value="提交数据"></label></div>
<div><label><input type="button" value="操作"></label></div>

</body>
</html>